<template>
  <el-form :model="data" ref="form" class="form">
    <el-tabs tab-position="left" style="height: 350px">
      <el-tab-pane
        :label="groupAttr.name"
        v-for="(groupAttr, groupAttrIndex) in data.groupAttrs"
        :key="groupAttrIndex"
      >
        <el-form-item
          v-for="(attr, index) in groupAttr.attrs"
          :key="index"
          :label="attr.name"
          label-width="150px"
        >
          <el-radio-group v-model="attr.value" v-if="attr.dataType == 2">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
          <el-autocomplete
            v-if="!attr.isMulti && attr.dataType != 2"
            v-model="attr.value"
            :fetch-suggestions="
              (queryString, cb) => querySearch(attr, queryString, cb)
            "
            placeholder="请输入内容"
          >
            <template slot="append" v-if="attr.unit != ''">{{
              attr.unit
            }}</template>
          </el-autocomplete>

          <el-select
            v-if="attr.isMulti && attr.dataType != 2"
            v-model="attr.values"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择"
          >
            <el-option
              v-for="item in attr.optionList"
              :key="item.attrOptionSn"
              :label="item.attrValue"
              :value="item.attrValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script>
import productFormMixins from "@/views/base/productForm";
import jsonUtils from "@/utils/jsonUtils";
import productApi from "@/api/productApi";

export default {
  name: "spuUpdateAttrForm",
  mixins: [productFormMixins],
  props: ["spuInfo"],
  data() {
    return {
      init: {
        groupAttrs: [],
      },
      data: {
        groupAttrs: [],
      },
    };
  },
  methods: {
    querySearch(attr, queryString, cb) {
      var list = [];
      attr.optionList.forEach((option) => {
        list.push({
          value: option.attrValue,
        });
      });
      cb(list);
    },
    initData() {
      if (this.spuInfo.groupAttrs) {
        this.data.groupAttrs = jsonUtils.deepCopy(this.spuInfo.groupAttrs);
      }
    },
    // 获取数据
    getData() {
      var result = [];
      this.data.groupAttrs.forEach((groupAttr) => {
        groupAttr.attrs.forEach((attr) => {
          if (attr.value != null) {
            if (typeof attr.value === "string" && attr.value != "") {
              result.push({
                attrId: attr.id,
                attrValue: attr.value,
              });
            }
            if (
              typeof attr.value === "object" &&
              Array.isArray(attr.value) &&
              attr.value.length > 0
            ) {
              result.push({
                attrId: attr.id,
                attrValue: attr.value.join(","),
              });
            }
          }
        });
      });
      return result;
    },
    // 获取预览数据
    getPreviewData() {
      var result = [];
      this.data.groupAttrs.forEach((groupAttr) => {
        var newGroupAttr = [];
        var newAttrs = [];
        var hasContent = false;
        groupAttr.attrs.forEach((attr) => {
          // 没有填写内容的attr不保存
          if (attr.value != null && attr.value != "") {
            hasContent = true;
            newAttrs.push(attr);
          }
        });
        if (hasContent) {
          newGroupAttr = jsonUtils.deepCopy(groupAttr);
          newGroupAttr.attrs = jsonUtils.deepCopy(newAttrs);
          result.push(newGroupAttr);
        }
      });
      return {
        groupAttrs: result,
      };
    },
  },
};
</script>

<style lang="less" scoped>
.form {
  overflow: auto;
  height: 60vh;
  .el-autocomplete {
    width: 100%;
  }
}
.el-form .el-select {
  width: 100%;
}
</style>